<template>

  <div class="menu_list_container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>系统设置</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="menu_list_card">

      <!-- title -->
      <el-row class="title">
        <el-col>
          <el-button @click='add_menu' type="primary">添加菜单</el-button>
        </el-col>
      </el-row>

      <!-- 主体内容 -->
      <div class="menu_list_content">

        <!-- 手写表格 -->
        <div class="my_menu_table">

          <!-- top -->
          <el-row class="top">
            <el-col class="padd_20" :span="6">
              <el-checkbox v-model="checked"></el-checkbox>
              <span>菜单图标、名称</span>
            </el-col>

            <el-col class="text_al" :span="3"></el-col>

            <el-col class="text_al" :span="4">
              <span>排序</span>
            </el-col>

            <el-col class="text_al" :span="4">
              <span>状态</span>
            </el-col>

            <el-col class="text_al" :span="4">
              <span>操作</span>
            </el-col>
          </el-row>

          <!-- 菜单项 -->
          <div class="menu_item_box">
            <el-row class="menu_item">
              <el-col class="padd_20" :span="6">
                <el-checkbox v-model="checked"></el-checkbox>
                <span class="icon_box"></span>
                <span>运营与策划</span>
              </el-col>

              <el-col class="text_al" :span="3"></el-col>

              <el-col class="text_al" :span="4">
                <span>1</span>
              </el-col>

              <el-col class="text_al" :span="4">
                <el-switch v-model="status">
                </el-switch>
              </el-col>

              <el-col class="text_al" :span="4">
                <span class="edit">修改</span>
                <span class="del">删除</span>
              </el-col>
            </el-row>

            <!-- 子菜单 -->
            <el-row class="menu_inner_item">
              <el-col class="padd_50" :span="6">
                <el-checkbox v-model="checked"></el-checkbox>
                <span>首页轮播图管理</span>

              </el-col>

              <el-col class="text_al" :span="3">
                <span>链接地址</span>
              </el-col>

              <el-col class="text_al" :span="4">
                <span>1</span>
              </el-col>

              <el-col class="text_al" :span="4">
                <el-switch v-model="status">
                </el-switch>
              </el-col>

              <el-col class="text_al" :span="4">
                <span class="edit">修改</span>
                <span class="del">删除</span>
              </el-col>
            </el-row>
          </div>

          <!-- 菜单项 -->
          <div class="menu_item_box">
            <el-row class="menu_item">
              <el-col class="padd_20" :span="6">
                <el-checkbox v-model="checked"></el-checkbox>
                <span class="icon_box"></span>
                <span>运营与策划</span>
              </el-col>

              <el-col class="text_al" :span="3"></el-col>

              <el-col class="text_al" :span="4">
                <span>1</span>
              </el-col>

              <el-col class="text_al" :span="4">
                <el-switch v-model="status">
                </el-switch>
              </el-col>

              <el-col class="text_al" :span="4">
                <span class="edit">修改</span>
                <span class="del">删除</span>
              </el-col>
            </el-row>

            <!-- 子菜单 -->
            <el-row class="menu_inner_item">
              <el-col class="padd_50" :span="6">
                <el-checkbox v-model="checked"></el-checkbox>
                <span>首页轮播图管理</span>

              </el-col>

              <el-col class="text_al" :span="3">
                <span>链接地址</span>
              </el-col>

              <el-col class="text_al" :span="4">
                <span>1</span>
              </el-col>

              <el-col class="text_al" :span="4">
                <el-switch v-model="status">
                </el-switch>
              </el-col>

              <el-col class="text_al" :span="4">
                <span class="edit">修改</span>
                <span class="del">删除</span>
              </el-col>
            </el-row>
          </div>

          <!-- 菜单项 -->
          <div class="menu_item_box">
            <el-row class="menu_item">
              <el-col class="padd_20" :span="6">
                <el-checkbox v-model="checked"></el-checkbox>
                <span class="icon_box"></span>
                <span>运营与策划</span>
              </el-col>

              <el-col class="text_al" :span="3"></el-col>

              <el-col class="text_al" :span="4">
                <span>1</span>
              </el-col>

              <el-col class="text_al" :span="4">
                <el-switch v-model="status">
                </el-switch>
              </el-col>

              <el-col class="text_al" :span="4">
                <span class="edit">修改</span>
                <span class="del">删除</span>
              </el-col>
            </el-row>

            <!-- 子菜单 -->
            <el-row class="menu_inner_item">
              <el-col class="padd_50" :span="6">
                <el-checkbox v-model="checked"></el-checkbox>
                <span>首页轮播图管理</span>

              </el-col>

              <el-col class="text_al" :span="3">
                <span>链接地址</span>
              </el-col>

              <el-col class="text_al" :span="4">
                <span>1</span>
              </el-col>

              <el-col class="text_al" :span="4">
                <el-switch v-model="status">
                </el-switch>
              </el-col>

              <el-col class="text_al" :span="4">
                <span class="edit">修改</span>
                <span class="del">删除</span>
              </el-col>
            </el-row>

            <!-- 子菜单 -->
            <el-row class="menu_inner_item">
              <el-col class="padd_50" :span="6">
                <el-checkbox v-model="checked"></el-checkbox>
                <span>首页轮播图管理</span>

              </el-col>

              <el-col class="text_al" :span="3">
                <span>链接地址</span>
              </el-col>

              <el-col class="text_al" :span="4">
                <span>1</span>
              </el-col>

              <el-col class="text_al" :span="4">
                <el-switch v-model="status">
                </el-switch>
              </el-col>

              <el-col class="text_al" :span="4">
                <span class="edit">修改</span>
                <span class="del">删除</span>
              </el-col>
            </el-row>

            <!-- 子菜单 -->
            <el-row class="menu_inner_item">
              <el-col class="padd_50" :span="6">
                <el-checkbox v-model="checked"></el-checkbox>
                <span>首页轮播图管理</span>

              </el-col>

              <el-col class="text_al" :span="3">
                <span>链接地址</span>
              </el-col>

              <el-col class="text_al" :span="4">
                <span>1</span>
              </el-col>

              <el-col class="text_al" :span="4">
                <el-switch v-model="status">
                </el-switch>
              </el-col>

              <el-col class="text_al" :span="4">
                <span class="edit">修改</span>
                <span class="del">删除</span>
              </el-col>
            </el-row>
          </div>

        </div>

      </div>

    </el-card>
  </div>

</template>

<script src='../../../static/js/set_up/menu_list.js'></script>

<style scoped lang='less'>
@import "../../../static/css/set_up/menu_list.less";
</style>


